<template>
 <div>
  <!-- 上半部分 -->
   <div class="shuxing">
    <!-- <wuliulTree /> -->
  <el-row>
     <el-card class="shuxing-left">
    <el-tree :data="list"  :props="defaultProps" node-key="id"
      @node-click="handleNodeClick" icon-class="el-icon-caret-right" :highlight-current="true"></el-tree>
   </el-card>
  </el-row>
  <!--  -->
  <el-row class="shuxing-right">
    <el-card >机构信息</el-card>
    <el-card class="biaodan">
      <!-- form 上 1-->
  <el-row>
     <el-form :inline="true" :model="{form}" class="demo-form-inline" disabled>
        <el-form-item label="机构编号" prop="id">
                   <el-input v-model="form.id" ></el-input>
        </el-form-item>
           <el-form-item label="机构名称" prop="name">
                  <el-input v-model="form.name"></el-input>
          </el-form-item>
            <el-form-item label="机构类型" prop="type">
    <el-select v-model="form.type" placeholder="请选择" disabled>
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
   </el-form>
  </el-row>
   <!-- 2 -->
   <el-row>
    <el-form  :model="{form}" disabled>
     <el-form-item label="机构地址" class="form-two">

     <el-select v-model="form.province" placeholder="请选择省" class="form-two-one">
         <el-option :label="item.name" :value="item.id" v-for="item in province" :key="item.id"></el-option>
    </el-select>
  <el-select v-model="form.city" placeholder="请选择市" class="form-two-two">
          <el-option :label="item.name" :value="item.id" v-for="item in city" :key="item.id"></el-option>
    </el-select>
     <el-select v-model="form.county" placeholder="请选择县/区" class="form-two-three">
           <el-option :label="item.name" :value="item.id" v-for="item in county" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
   </el-form>
   </el-row>
   <!-- 3 -->
<el-form :inline="true" :model="{form}" class="demo-form-inline" disabled>
  <el-form-item label="详细地址" prop="address">
    <el-input v-model="form.address" ></el-input>
  </el-form-item>
   <el-form-item label="经度" prop="longitude">
    <el-input v-model="form.longitude" ></el-input>
  </el-form-item>
  <el-form-item label="纬度" prop="latitude">
    <el-input v-model="form.latitude" ></el-input>
  </el-form-item>
</el-form>
<!-- 4 -->
<el-form :inline="true" :model="{form}" class="demo-form-inline" disabled>
  <el-form-item label="机构负责" prop="managerName">
    <el-input v-model="form.managerName" placeholder="审批人"></el-input>
  </el-form-item>
   <el-form-item label="机构电话" prop="phone">
    <el-input v-model="form.phone" ></el-input>
  </el-form-item>

</el-form>
<!-- 编辑 -->
<el-form>
<el-form-item class="bianji">
    <el-button type="danger" >编辑</el-button>
  </el-form-item>
</el-form>
    </el-card>
    <!-- 下半部分 -->
    <el-row class="form-bottom">
      <el-card>员工信息</el-card>
    </el-row>
    <el-row>
      <el-card>
         <el-table :data="formData" stripe style="width: 100%" :header-cell-style="{background:'#f8faff',color:'#818693'}">
    <el-table-column type="index"  label="序号" > </el-table-column>
    <el-table-column prop="userId" label="员工编号" width="220px" > </el-table-column>
    <el-table-column prop="name" label="员工姓名" > </el-table-column>
    <el-table-column prop="mobile" label="手机号"> </el-table-column>
    <el-table-column prop="agency" label="所属机构"> </el-table-column>
    <el-table-column prop="account" label="系统账户" > </el-table-column>
    <el-table-column prop="roleNames" label="系统角色" > </el-table-column>
    <el-table-column prop="status" label="账号状态" :formatter="formatterTransport"> </el-table-column>
  </el-table>
   <!-- 分页 -->
    <el-pagination
      :current-page="queyrInfo.page"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="queyrInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </el-card>
    </el-row>
  </el-row>
  </div>
 </div>
</template>
<script>
import { employeeLnformation, treeShapedApi, InstitutionalDetails, getProvinceApi, getCityApi } from '@/api/institution'
export default {
  name: 'wl-institution',
  data () {
    return {
      // 省市区
      province: [],
      county: [],
      city: [],
      District: [],
      provinceId: '',
      cityId: '',
      countyId: '',
      // 员工信息
      formData: [
        {
          name: '', // 员工姓名
          workNumber: '', // 员工编号
          mobile: '', // 手机号
          agency: '',
          account: '', // 系统账户
          station: '', // 系统角色
          status: '' // 账号状态
        }
      ],
      // 机构信息
      form: [{
        id: '', // 机构编号
        name: '', // 机构名称
        type: '', // 机构类型
        address: '', // 机构地址
        longitude: '', // 经度
        latitude: '', // 纬度
        managerName: '', // 机构负责人
        phone: '' // 机构电话
        // rrr: 545532
      }],
      list: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      idValue: '',
      queyrInfo: {
        page: 1,
        pageSize: 5
      },
      total: 0

    }
  },
  created () {
    this.getshuxungList()
    // this.getDetails()
  },
  methods: {
    // 获取员工信息
    async  handleNodeClick (data) {
      console.log(data.id) // 拿到id
      this.idValue = data.id

      const res = await InstitutionalDetails(data.id)
      console.log(res)
      res.data.province = res.data.province.id
      res.data.city = res.data.city.id
      res.data.county = res.data.county.id
      this.getObtainProvince()
      this.getObtainCity(res.data.city)
      this.getObtainDistrict(res.data.county)
      this.form = res.data
      console.log(this.form)

      // 处理员工信息
      const re = await employeeLnformation({ ...this.queyrInfo, idValue: this.idValue })
      console.log(re)
      this.formData = re.data.items
      this.total = +re.data.counts
      this.queyrInfo.page = re.data.page
      this.queyrInfo.pageSize = re.data.pageSize
      // 获取机构信息的时候 调用这个方法 获取省市区
      // this.getObtainProvince()
    },
    // 树形
    async getshuxungList () {
      const res = await treeShapedApi()
      // console.log(res)
      this.list = JSON.parse(res.data)
      // console.log(res.data)
      this.idValue = JSON.parse(res.data)
      // console.log(this.idValue)
    },
    // 状态数据转换
    formatterTransport (row) {
      // console.log(row)
      if (row.status === 1) {
        return '正常'
      } else if (row.status === 2) {
        return '不正常'
      }
    },
    handleSizeChange (val) {
      console.log(val)
      this.queyrInfo.pageSize = val
      this.handleNodeClick()
    },
    handleCurrentChange (val) {
      this.queyrInfo.page = val
      this.handleNodeClick()
    },
    // 获取省
    async  getObtainProvince () {
      const { data: res } = await getProvinceApi()
      console.log(res)
      this.province = res

      // this.cities = await getCityApi(this.form.province.id)
      // this.area = await getCityApi(this.form.city.id)
    },
    // 获取市
    async  getObtainCity (e) {
      const res = await getCityApi(e)
      console.log(res)
      this.city = res.data
    },
    // 获取区
    async   getObtainDistrict (e) {
      const res = await getCityApi(e)
      this.county = res.data
    }
  }
}
</script>

<style lang="scss" >
.shuxing{
  display: flex;
}
.shuxing-left {
    display: flex;
    margin-bottom: -17px;
    margin-right: -17px;
    height: 100vh!important;
    border-radius: 4px;
    width: 214px;
    padding-left: 9px;
    margin-left: 10px;
    padding-bottom: 15px;
  // justify-content: space-around;
}
.shuxing-right{
  // flex: 1;
  color: #2a2929;
    font-weight: 700;
    font-size: 16px;
  margin-left: 35px;
  width: 1000px;
  // padding-bottom: 40px;
}
/* 改变被点击节点背景颜色，字体颜色 */
.el-tree-node:focus > .el-tree-node__content {
  // background-color: #3274e6;
  color: red;
}
.form-two{
  display: flex;
  //  justify-content: flex-end;
  // align-content: space-between;
}
.form-two-one  {
  width: 280px;
}
.form-two-two {
  width: 280px;
}
.form-two-three {
  width: 280px;
}
.jigoufuzeren{
  margin-right: 20px;
}
.bianji {
  display: flex;
  justify-content: center;
}
.form-bottom{
  margin-top:20px;
}
.el-table {
font-size: 13px;
// background-color: red;
}

// 禁止旋转
.el-tree .el-tree-node__expand-icon.expanded{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
//有子节点 且未展开
.el-tree .el-icon-caret-right:before{
    //这里是你需要修改的图标路径
  background: url("../../assets/com/下载.png") no-repeat 0 0;
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}
//有子节点 且已展开
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
  background: url("../../assets/com/下载 (1).png") no-repeat 0 0;
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  font-size: 14px;
  background-size: 14px;
}
// 无子节点
.el-tree .el-tree-node__expand-icon.is-leaf::before{
    background: none;
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    font-size: 14px;
    background-size: 14px;
}
// 二级未展开
.el-tree-node__children .el-icon-caret-right:before {
  background: url("../../assets/com/下载 (3).png") no-repeat 0 0;
   content: '';
    display: block;
    width: 14px;
    height: 14px;
    font-size: 14px;
    background-size: 14px;
}
// 二级展开
.el-tree-node__children .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../../assets/com/下载 (4).png") no-repeat 0 0;
   content: '';
    display: block;
    width: 14px;
    height: 14px;
    font-size: 14px;
    background-size: 14px;
}
</style>
